
<template>
  <el-container>
    <!--        导航-->

    <el-container>
      <el-main>

        <span style="color: white;font-size: 18px;font-weight: 700">常用联系人</span>
        <div style="margin-top: 20px">
          <el-form inline="true" :model="formInline" ref="formInline" class="demo-formInline">
            <el-form-item label="所属单位" prop="region">
              <el-cascader v-model="formInline.region" placeholder="请选择 所属单位"
                           :options="options" filterable clearable :props="{ checkStrictly: true }"
                           :show-all-levels="false"></el-cascader>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input v-model="formInline.name" placeholder="请输入 姓名" clearable></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-input v-model="formInline.phone" placeholder="请输入 电话" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="onSubmit">搜索</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-delete" @click="resetForm('formInline')">清空</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--        表单   -->

        <div>
          <el-button type="primary" size="small" @click="addform"> + 新增</el-button>
          <el-dialog title="新增" :visible.sync="dialogFormVisibleadd">
            <el-divider></el-divider>
            <el-form inline="true" :model="add" ref="add" :rules="rulesadd" label-width="100px"
                     text-color="#fff" border>
              <el-form-item label="添加至单位:" prop="unit">
                <el-cascader v-model="add.unit" placeholder="请选择 添加至单位"
                             :options="options" filterable clearable :props="{ checkStrictly: true }"
                             :show-all-levels="false"></el-cascader>
              </el-form-item>
              <el-form-item label="姓名" prop="name">
                <el-input v-model="add.name" clearable placeholder="请输入 姓名"></el-input>
              </el-form-item>
              <el-form-item label="电话" prop="phone">
                <el-input v-model="add.phone" clearable placeholder="请输入 电话"></el-input>
              </el-form-item>
              <div>
                <el-form-item label="微信通知">
                  关闭
                  <el-switch v-model="add.WeChat"></el-switch>
                  开启
                </el-form-item>
                <el-form-item label="短信通知" prop="note" :formatter="stateFormat">
                  关闭
                  <el-switch v-model="add.note"></el-switch>
                  开启
                </el-form-item>
                <el-form-item label="语音通知">
                  关闭
                  <el-switch v-model="add.voice"></el-switch>
                  开启
                </el-form-item>
              </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" icon="el-icon-circle-plus-outline"
                         @click="submitForm">保 存
              </el-button>
              <el-button type="primary" icon="el-icon-circle-close"
                         @click="resetForm('add')">取 消
              </el-button>
            </div>
          </el-dialog>
          <!--        新增   -->

          <el-button type="primary" icon="el-icon-download" circle size="small"
                     @click="dialogVisibledownload = true" style="position: absolute;left:1180px"></el-button>
          <el-dialog title="导出" :visible.sync="dialogVisibledownload" width="30%">
            <el-divider></el-divider>
            <el-form :model="download" ref="download" label-width="80px">
              <el-form-item label="文件名" prop="filename">
                <el-input v-model="download.filename" clearable placeholder="请输入 文件名"></el-input>
              </el-form-item>

              <el-form-item label="数据" prop="date">
                <el-select v-model="download.date" filterable clearable placeholder="请选择 数据">
                  <el-option
                      v-for="item in dateoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      :disabled="item.disabled">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="字段" prop="field">
                <el-select v-model="download.field" filterable multiple clearable placeholder="请选择 字段">
                  <el-option
                      v-for="item in fieldoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="参数" prop="checkList">
                <el-checkbox-group v-model="checkList">
                  <el-checkbox label="表头" disabled></el-checkbox>
                  <el-checkbox label="数据源"></el-checkbox>
                  <el-checkbox label="复杂表头" disabled></el-checkbox>
                  <el-checkbox label="合计统计" disabled></el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="handledownload">确 定</el-button>
                  <el-button type="primary" @click="resetForm('download')">取 消</el-button>
                </span>
          </el-dialog>
          <!--        下载-->

          <el-button type="primary" icon="el-icon-refresh" circle size="small"
                     style="position: absolute;left:1220px"></el-button>
          <!--        刷新-->
          <el-button @click="drawer = true" type="primary" icon="el-icon-s-operation" circle size="small"
                     style="position: absolute;left:1250px">
          </el-button>
          <el-drawer
              title="我是标题"
              :visible.sync="drawer"
              :with-header="false">
            <span>我来啦!</span>
          </el-drawer>
          <!--        抽屉  -->
          <el-button type="primary" icon="el-icon-search" circle size="small"
                     style="position: absolute;left:1300px"></el-button>
          <!--        隐藏-->

        </div>

        <div style="margin-top: 20px">
          <el-table :data="tableData"
                    style="width: 99%"
                    :highlight-current-row="false"
                    :header-cell-style="{backgroundColor: '#3F51B5', color: '#fff', fontSize: '12px', textAlign: 'center' }"
                    :cell-style="{color: '#fff', fontSize: '11px', textAlign: 'center' }"
                    :row-class-name="tableRowClassName">
            <el-table-column prop="unit" label="所属单位" width="200"></el-table-column>
            <el-table-column prop="name" label="姓名" width="100"></el-table-column>
            <el-table-column prop="phone" label="电话" width="120"></el-table-column>
            <el-table-column prop="offical" label="是否关注公众号" width="200"></el-table-column>

            <el-table-column
                prop="WeChat"
                label="微信通知"
                width="100">
            </el-table-column>
            <el-table-column
                prop="note"
                label="短信通知"
                width="100">
            </el-table-column>
            <el-table-column
                prop="voice"
                label="语音通知"
                width="100">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" icon="el-icon-edit"
                           @click="open(scope.$index, scope.row)">编辑
                </el-button>
                <el-dialog title="编辑" :visible.sync="dialogVisibleEdit" highth="500px">
                  <el-divider></el-divider>
                  <el-form inline="true" :model="form" ref="form" :rules="rulesEdit" label-width="80px">
                    <el-form-item label="姓名" prop="name">
                      <el-input v-model="form.name" clearable placeholder="请输入 姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" prop="phone">
                      <el-input v-model="form.phone" clearable placeholder="请输入 电话"></el-input>
                    </el-form-item>
                    <el-form-item label="微信通知" prop="WeChat">
                      关闭
                      <el-switch v-model="form.WeChat"></el-switch>
                      开启
                    </el-form-item>
                    <el-form-item label="短信通知" prop="note">
                      关闭
                      <el-switch v-model="form.note"></el-switch>
                      开启
                    </el-form-item>
                    <el-form-item label="语音通知" prop="voice">
                      关闭
                      <el-switch v-model="form.voice"></el-switch>
                      开启
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button type="primary" icon="el-icon-circle-check"
                               @click="handleEdit(scope.$index, scope.row)">修 改
                    </el-button>
                    <el-button type="primary" icon="el-icon-circle-close"
                               @click="resetForm('form')">取 消
                    </el-button>
                  </div>
                </el-dialog>

                <el-button size="mini" type="danger" icon="el-icon-view"
                           @click="dialogVisibleDelete = true ">删除
                </el-button>
                <el-dialog
                    title="提示"
                    :visible.sync="dialogVisibleDelete"
                    width="30%"
                    text-color="#fff">
                  <i class="el-icon-warning"></i>
                  <span>删除站点, 是否继续?</span>
                  <span slot="footer" class="dialog-footer">
                                <el-button type="primary" @click.native.prevent="deleteRow(scope.$index, tableData)">确 定</el-button>
                                <el-button @click="dialogVisibleDelete = false">取 消</el-button>
                            </span>
                </el-dialog>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!--        表格 编辑 删除 -->
      </el-main>

      <el-footer>
        <div>
          <span class="demonstration"></span>
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage4"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="26"
              style="position: absolute;left:1000px">
          </el-pagination>
        </div>
        <!--        分页-->
      </el-footer>
    </el-container>
  </el-container>


</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: '智慧消防远程监控平台', label: '智慧消防远程监控平台',
          children: [{
            value: '朔州市消防大队', label: '朔州市消防大队',
            children: [{
              value: '圣厚源大酒店', label: '圣厚源大酒店',
              children: [{value: '圣厚源办公室', label: '圣厚源办公室'}]
            },
              {value: '瑞明网络通信工程有限公司', label: '瑞明网络通信工程有限公司'}]
          },
            {
              value: '瑞明网络通信工程有限公司', label: '瑞明网络通信工程有限公司',
              children: [{
                value: '朔州市经济开发区管理委员会', label: '朔州市经济开发区管理委员会',
                children: [{value: '开发区环境局', label: '开发区环境局'}, {
                  value: '开发区建设局',
                  label: '开发区建设局'
                }]
              },
                {
                  value: '朔州市邮政储蓄银行', label: '朔州市邮政储蓄银行',
                  children: [{value: '右玉县支行', label: '右玉县支行'}, {value: '山阴县支行', label: '山阴县支行'}]
                },
                {
                  value: '开发南路', label: '开发南路',
                  children: [{value: '朔城区第三中学', label: '朔城区第三中学'}]
                },
                {
                  value: '文远路街道', label: '文远路街道',
                  children: [{value: '朔州今乔智慧公寓', label: '朔州今乔智慧公寓'}, {
                    value: '幸福家纺',
                    label: '幸福家纺'
                  }]
                }]
            }]
        }
      ],
      value: '',
      formInline: {
        region: '',
        name: '',
        phone: ''
      },
      input: '',
      //表单
      dialogFormVisibleadd: false,
      add: {
        name: '',
        phone: '',
        unit: '',
        WeChat: '',
        note: '',
        voice: ''
      },
      rulesadd: {
        unit: [{required: true, message: '所属单位', trigger: 'change'}],
        name: [{required: true, message: '姓名', trigger: 'blur'}],
        phone: [{required: true, message: '请输入您的号码', trigger: 'blur'}]
      },
      //新增

      dialogVisibledownload: false,
      download: {
        filename: '',
        date: '',
        field: ''
      },
      dateoptions: [{value: '选项1', label: '当前数据(当前页全部的数据)'},
        {value: '选项2', label: '选中的数据(当前页选中的数据)', disabled: true}],
      value: '',
      fieldoptions: [{value: '选项1', label: '添加至单位'},
        {value: '选项2', label: '所属单位'},
        {value: '选项3', label: '姓名'},
        {value: '选项4', label: '电话'},
        {value: '选项5', label: '是否关注公众号'},
        {value: '选项6', label: '微信通知'},
        {value: '选项7', label: '短信通知'},
        {value: '选项8', label: '语音通知'}],
      value: '',
      checkList: '',
      //下载

      drawer: false,//抽屉

      value1: true,
      tableData: [{
        unit: '振华支行',
        name: '王小虎',
        phone: '123456',
        offical: '已关注',
        WeChat: '打开',
        note: ' ',
        voice: '',
      },
        {
          unit: '支行',
          name: '小虎',
          phone: '123456',
          offical: ' ',
          WeChat: '打开',
          note: ' ',
          voice: '',
        },
        {
          unit: '幸福家纺',
          name: '赵小虎',
          phone: '123456789',
          offical: '已关注',
          WeChat: '打开',
          note: '',
          voice: '打开'
        }],
      form: {
        unit: '',
        name: '',
        phone: '',
        WeChat: '',
        note: '',
        voice: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },//表格
      dialogVisibleEdit: false,//表格 编辑
      rulesEdit: {
        name: [{required: true, message: '姓名', trigger: 'blur'}],
        phone: [{required: true, message: '请输入您的号码', trigger: 'blur'}]
      },
      dialogVisibleDelete: false,//表格 删除

      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,//分页

    };
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },//导航

    onSubmit() {
      console.log('submit!');
      console.log(this.formInline);
    },//表单 搜索

    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogFormVisibleadd = false
      this.dialogVisibledownload = false
      this.dialogVisibleEdit = false
    },//表单 重置

    addform() {
      this.add = {
        name: '',
        phone: '',
        unit: '',
        WeChat: '',
        note: '',
        voice: ''
      }
      this.dialogFormVisibleadd = true
    },
    submitForm() {
      this.add.unit = this.add.unit[this.add.unit.length - 1]
      this.tableData.push(this.add) //向tableData中添加数据
      this.dialogFormVisibleadd = false
      console.log('submit!')
    },//新增

    handledownload() {

      this.dialogVisibledownload = false
    },//下载

    tableRowClassName({row, rowIndex}) {
      if ((rowIndex + 1) % 2 === 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    }, //表格斑马纹

    open(idx, row) {
      this.dialogVisibleEdit = true;
      this.from.name = row.name;
      this.from.phone = row.phone;
      this.from.WeChat = row.WeChat;
      this.from.note = row.note;
      this.from.voice = row.voice;
    },
    handleEdit(index, row) {
      debugger
      console.log(index, row)
      this.dialogVisibleEdit = false
    }, //表格 编辑

    deleteRow(index, rows) {
      rows.splice(index, 1);
      this.dialogVisibleDelete = false;
    }, //表格 删除

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }, //分页
  }
}
</script>


<style>
.el-aside {
  background-color: #182450;
  color: #333;
  height: 700px;
}

.el-header {
  background-color: #242E66;
  color: #333;
  height: 100px;
}

.el-main {
  background-color: #242E66;
  color: #333;
  height: 500px;
}

.el-footer {
  background-color: #242E66;
  color: #333;
  line-height: 100px;
}

.el-form-item__label {
  color: #fff;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}

.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  background: #242E66;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgb(0 0 0 30%);
  box-sizing: border-box;
  width: 50%;
}

.el-dialog__title {
  line-height: 24px;
  font-size: 18px;
  color: #fff;
}

.el-pagination__total {
  margin-right: 10px;
  font-weight: 400;
  color: #fff;
}

.el-pagination__jump {
  margin-left: 24px;
  font-weight: 400;
  color: #fff;
}

.el-pagination__jump .el-input__inner {
  padding: 0 3px;
  background: #242E66;
}

.el-pagination {
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: 700;
}

.el-table .warning-row {
  background: #384176;
}

/*斑马纹*/
.el-table .success-row {
  background: #242E66;
}

/*斑马纹*/

.el-table {
  border: none !important;
}

.el-table td, .el-table th {
  border: none !important;
}

/*表格线*/
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}

/*表格线*/
.el-table tbody tr:hover > td {
  background: #242E66 !important;
}

/*表格鼠标悬浮*/
.el-dialog__title {
  line-height: 20px;
  font-size: 18px;
  color: #fff;
}

/*弹窗*/
.el-dialog__body {
  padding: 30px 20px;
  color: #fff;
  font-size: 16px;
  word-break: break-all;
}

/*弹窗*/
/*表单*/
.el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
  background-color: #242E66;
}

.el-cascader .el-input .el-input__inner {
  text-overflow: ellipsis;
  background-color: #242E66;
}

.el-input--suffix .el-input__inner {
  padding-right: 30px;
  background-color: #242E66;
}

.el-cascader-menu__list {
  position: relative;
  min-height: 100%;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  box-sizing: border-box;
  background-color: #242E66;
}

.el-cascader-node__label {
  color: #fff;
}

.el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner {
  color: #fff;
}

.el-input__inner {
  color: #fff;
}

.el-pagination .btn-next, .el-pagination .btn-prev {
  background: center center no-repeat #FFF;
  background-size: 16px;
  cursor: pointer;
  margin: 0;
  color: #fff;
  background-color: #242E66;
}

.el-pagination .el-select .el-input .el-input__inner {
  padding-right: 25px;
  border-radius: 3px;
  color: #fff;
  background-color: #242E66;
}

.el-pager li {
  color: #fff;
  background-color: #242E66;
}

.el-pagination button:disabled {
  color: #fff;
  background-color: #242E66;
}

.el-select-dropdown__item {
  color: #fff;
  background-color: #242E66;
}

.el-select-dropdown__list {
  background-color: #242E66;
}

</style>

